
<template>
    <div class="coupon_list">
            <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" :head-height="80" @refresh="refresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="8"
            :immediate-check="false"
            finished-text="到底咯..."
            @load="load"
        >
            <div class="coupon_item" v-for="(item,key) in list" :key="key">
                    <div class="item_content">
                        <router-link :to="{path:'/coupon/info',query:{id:item.id}}">
                            <div class="left">{{item.rate*100}}<span>折</span></div>
                            <div class="right">
                                <div>{{ item.title }}</div>
                                <div>订单满<span>100元</span>打<span>{{item.rate*100}}折</span></div>
                                <div>每人限领1张</div>
                                <div>活动结束时间:{{ item.endtime_text }}</div>
                            </div>
                        </router-link>
                    </div>
                    <div class="item_btn">
                        <a class="right_btn" @click="Info(item.id)">优惠详情</a>
                    </div>
                </div>
        </van-list>
        </van-pull-refresh>
    <!-- 返回顶部 -->
    <van-back-top />
    </div>
    

  <Tabbar />
</template>

<script setup>
    
    const {proxy} = getCurrentInstance();//页面的this
    let list = ref([]);
    let refreshing = ref(false);//下拉刷新
    let finished = ref(false);//是否无更多数据
    let loading = ref(false);//加载状态
    let page = ref(1);//分页
    // 页面加载时调用load方法
    onMounted(()=>{
        load()
    })
    //下拉刷新
    const refresh = async ()=>{
        setTimeout(() => {
            //每次刷新的时候把页数置为1
            page.value = 1;
            list.value = [];
            finished.value = false;
            loading.value = true;
            // 在此加载load方法
            load()
      }, 1000);
    }
    const load = async ()=>{
        //传递busid就行
        //上拉刷新 下拉加在
        //判断是否为加载中的状态
        if(refreshing.value){
            refreshing.value = false
        }
        //发送请求
        var result = await proxy.$POST({
            url:'/coupon/index',
            params:{page:page.value}
        })
        loading.value = false//请求完毕后加载一下

        if(!result) return false
        if(result.code == 0){
            //提醒到底了
            finished.value = true;
            return false
        }
        page.value++; //页数改变
        //返回的值合并一下
        // console.log(result.data)
        // 合并数组
        list.value = list.value.concat(result.data)
    }
    const Info = (value)=>{
        proxy.$router.push({path:'/coupon/info',query:{id:value}})
    }
</script>

<style scoped>
  @import url('/assets/css/CouponIndex.css');
</style>